<template>
  <div class="deep-data">
    <div class="flex justify-between text-grey font-24">
      <div>
        <div>{{ $t('价格') }}</div>
        <div class="mt-5">(USDT)</div>
      </div>
      <div class="text-right items-end justify-end">
        <div class="">{{ $t('数量') }}</div>
        <div class="mt-5">({{ symbol_data.toUpperCase() || '--' }})</div>
      </div>
    </div>

    <div v-if="showType == 0 || showType == 2" class="flex justify-between pt-6 font-26" v-for="(item, index) in redData"
      :key="item + index" @click="onPrice(item.price)" :style="{
        'background': `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'} 0%` +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
      }">
      <div class="text-red ">{{ item.price || '--' }}</div>
      <div class="text-right textColor" v-if="symbol == 'shib'">{{ fixDate(item.amount, $i18n) || '--' }}</div>
      <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
    </div>
    <div class="text-red pt-12 font-34 font-700 text-center">
      {{ price || '--' }}
    </div>
    <div class="pb-12 font-20 text-center">
      ≈ {{ ((price *
        currency.rate).toFixed(price.toString().split('.')[1] ?
          price.toString().split('.')[1].length : 2)) || '--' }}
    </div>
    <div v-if="showType == 0 || showType == 1" class="flex justify-between pt-6 font-26"
      v-for="(item, index) in greenData" :key="index" @click="onPrice(item.price)" :style="{
        'background': `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'} 0%` +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
      }">
      <div class="text-green">{{ item.price || '--' }}</div>
      <div class="text-right textColor" v-if="symbol_data == 'shib'">{{ fixDate(item.amount, $i18n) || '--' }}</div>
      <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
    </div>
  </div>
</template>

<script>
import { WS_URL } from '@/config'
import { fixDate } from "@/utils/utis";
import { THEME } from '@/config/theme'
import { _getHomeList } from '@/service/home.api'
import { mapGetters } from 'vuex'
let DEEP_LENGTH = 6

export default {
  name: 'CryptosTradeDeepData',
  props: {
    symbol: {
      type: String,
    },
    price: {
      type: [Number, String],
      default: '0.00'
    },
    showType: {
      type: Number,
      default: 0
    },
    selectValue: {
      type: Number,
    }
  },
  data() {
    const init = []
    for (let i = 0; i < DEEP_LENGTH; i++) {
      init.push({ amount: '', price: '' })
    }
    return {
      THEME,
      fixDate,
      greenData: init,
      redData: init,
      socket: null,
      symbol_data: ''
    }
  },
  mounted() {
    // this.startDeepSocket()
    if (this.showType == 1 || this.showType == 2) {
      DEEP_LENGTH = 12
    } else {
      DEEP_LENGTH = 6
    }
    this.getHomeList()
  },
  watch: {
    symbol(val) {
      this.startDeepSocket()
      this.getHomeList()
    },
    showType(val) {
      if (val == 1 || val == 2) {
        DEEP_LENGTH = 12
      } else {
        DEEP_LENGTH = 6
      }
    },
  },
  computed: {
    ...mapGetters('home', ['currency']),
  },
  methods: {
    getHomeList() {
      _getHomeList(this.symbol).then((res) => {
        this.symbol_data = res[0].symbol_data
        let numberText = res[0].close.toString()
        let numberLength = (numberText.substring(numberText.indexOf('.') + 1, numberText.length)).length

        let arry = []
        let str = '0.'
        for (let j = 0; j < numberLength - 1; j++) {
          str = str + '0'
          arry.push(str)
        }
        let newArry = []
        arry.map((item) => {
          let obj = {
            name: item + '1',
            value: (item.substring(item.indexOf('.') + 1, item.length)).length + 1
          }
          newArry.push(obj)
        })
        if (numberLength <= 2) {
          let obj = [
            {
              name: '0.1',
              value: 1,
            },
            {
              name: '1',
              value: -1,
            },
            {
              name: '10',
              value: -2,
            },
            {
              name: '100',
              value: -3,
            }
          ]
          newArry = newArry.concat(obj)
        }
        if (this.symbol == 'shib') {
          newArry = newArry.slice(-4)
        }
        let dataObj = {
          arry: newArry,
          numberLength: numberLength
        }
        this.$emit('getList', dataObj)
      })
    },
    startDeepSocket() { // 开启socket链接 
      this.closeSocket()
      this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`)
      this.socket.onmessage = (evt) => {
        const { data } = evt
        const { code, data: _data } = JSON.parse(data)
        if (code / 1 === 0) {
          this.handleDeep(_data)
        }
      }
    },
    handleDeep(data) { // 格式化数据
      this.deepData = data
      if (this.selectValue >= 1) {
        this.deepData.asks.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.selectValue)
        })
        this.deepData.bids.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.selectValue)
        })
      } else {
        if (this.selectValue == -1) {
          this.deepData.asks.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf('.'))
          })
          this.deepData.bids.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf('.'))
          })
        }
        if (this.selectValue == -2) {
          this.deepData.asks.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf('.') - 1) + '0'
          })
          this.deepData.bids.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf('.') - 1) + '0'
          })
        }
        if (this.selectValue == -3) {
          this.deepData.asks.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf('.') - 2) + '00'
          })
          this.deepData.bids.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf('.') - 2) + '00'
          })
        }
        // this.selectValue
      }
      const { asks, bids } = data
      //获取小数位数
      this.redData = asks.sort((a, b) => b.price - a.price).slice(0, DEEP_LENGTH)
      this.greenData = bids.sort((a, b) => b.price - a.price).slice(0, DEEP_LENGTH)

    },
    onPrice(price) {
      this.$emit('price', price)
    },
    closeSocket() {
      this.socket && this.socket.close()
      this.socket = null
    },
  },
  activated() {
    this.startDeepSocket()
  },
  deactivated() {
    this.closeSocket()
  },
  beforeUnmount() { //
    this.socket && this.socket.close()
    this.socket = null
  }

}    
</script>
<style lang="scss">
@import "@/assets/init.scss";
</style>